<template>
  <div class="scrollBox" ref="numberBox">
      <div class="number" v-for="(item, index) in numberList"
      :key="index">
        <span
        v-if="index<6"
          class="item"
          ref="numberItem"
          :data-number="item"
          :data-index="index"
          >0123456789</span
        >
      </div>
    <span v-if="value > 999999">...</span>
  </div>
</template>

<script>
export default {
  name: 'ScrollNumber',
  props: {
    value: {
      type: [String, Number],
      default: 0
    }
  },
  data () {
    return {
      numberList: String(this.value).split('')
    }
  },
  methods: {
    // 设置每一位数字的偏移
    setNumberTransform () {
      if (this.numberList.length <= 6) {
        this.$refs.numberBox.style.fontSize = '0.8em'
      } else {
        this.numberList = this.numberList.slice(0, 6)
        this.$refs.numberBox.style.fontSize = '0.7em'
      }
      const numberItems = this.$refs.numberItem
      const obj = {}
      Array.from(numberItems).forEach((c, i) => {
        if (i < 6) {
          const key = c.dataset.index
          const value = c.dataset.number
          let init = 0
          obj[key] = setInterval(() => {
            if (init < value * 10) {
              init += 1
              c.style.transform = `translateY(-${init}%)`
            } else {
              clearInterval(obj[key])
              obj[key] = null
            }
          }, 10)
        }
      })
    }
  },
  mounted () {
    this.setNumberTransform()
  }
}
</script>

<style scoped lang="less">
.scrollBox {
  display: flex;
  width: 100%;
  flex-flow: row nowrap;
  overflow: hidden;
  font-size: 3.5em;
  text-overflow: ellipsis;
}
.number {
  flex:0.2 1.1;
  overflow: hidden;
  height: 1em;
  width: 16.2%;
  text-align:center;
  .item {
    writing-mode: vertical-rl;
    text-orientation: upright;
    transform: translateY(0%);
  }
}
</style>
